import React, { Component } from "react";
import "./about.less";
// redux
import { changeName, changeAge } from "../redux/action/TestAction";
import { asyncChangeName } from "../redux/asyncAction/AsyncTestAction";
import { connect as realConnect } from "react-redux";

type StateType = {
  [propName: string]: any;
};
type PropType = {
  [propName: string]: any;
};
interface About {
  state: StateType;
  props: PropType;
}

// 获取redux
const mapStateToProps = (state: any) => {
  return {
    state,
  };
};
const connect: any = realConnect;

@connect(mapStateToProps, { changeName, changeAge, asyncChangeName })
class About extends Component {
  refs: any = React.createRef()
  componentDidMount() {
    // 调用redux中指定reducer的同步action和异步action方法
    this.props.changeName("张三");
    this.props.changeAge(25);
    this.props.asyncChangeName();
    // 获取redux中指定reducer的state
    console.log(this.props.state.TestReducer);
    console.log(this.refs.value);
    
  }
  changeAge(){
    let age:number = this.refs.value
    this.props.changeAge(age);
  }

  render() {
    return (
      <div className="about">
        <div className="container">
          <h3 className="center"> About页面</h3>
          <p>欢迎来到关于我们页面！</p>
        </div>
        <div>
          <p>名字是：{this.props.state.TestReducer.name}</p>
          <p>年龄是：{this.props.state.TestReducer.age}</p>
          <input ref={(input: HTMLInputElement) => this.refs = input}  type="text" /> 
          <button onClick={this.changeAge.bind(this)}>修改年龄</button>
        </div>
      </div>
    );
  }
}

// const mapStateToProps = (state) => {
//   return {
//     posts: state.posts,
//   };
// };

// const mapDispatchToProps = (dispatch) => {
//   return {
//     changeTitle: (id) => dispatch({ type: "CHANGE_TITLE", id: id }),
//   };
// };

export default About;
